<template>
    <div class="com-container" style="fontSize:12px">
        <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
    </div>
</template>

<script>
export default {
    props: ["commonData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xDatas: null
        };
    },
    watch: {
        commonData: {
            handler(newVal) {
                if (newVal) {
                    // qualityData
                    this.allData = newVal

                    this.getData();

                }
            },
            immediate: true
        },

    },

    mounted() {
        setTimeout(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 100);
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {

            this.chartInstance = this.$echarts.init(this.$refs.echarts);

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['生产数量', '超标数量'],
                    textStyle: {
                        color: "rgba(23, 26, 29, 1)",
                        // fontSize: 14
                    },
                    // itemWidth: 15,
                    // itemHeight: 15,
                    // itemGap: 35
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [],

                    axisLine: {
                        lineStyle: {
                            color: 'rgba(126, 134, 142, 0.5)',
                            width: 0.8,
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(23, 26, 29, 1)",
                            // fontSize:14
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',

                    axisTick: {
                        show: false,
                    },
                    axisLine: {

                        lineStyle: {
                            color: "rgba(126, 134, 142, 0.24)",
                            width: 0.8,
                            type: "solid"

                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(23, 26, 29, 1)",
                            // fontSize:14

                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(126, 134, 142, 0.24)',
                            type: 'dotted'
                        }
                    },
                }],
                series: [{
                    name: '生产数量',
                    type: 'bar',
                    data: [],
                    // barWidth: 20, //柱子宽度
                    barGap: 0.3, //柱子之间间距
                    itemStyle: {
                        normal: {

                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(116, 178, 252, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(116, 178, 252, 0.20)'
                                }]
                            },
                        }
                    }
                }, {
                    name: '超标数量',
                    type: 'bar',
                    data: [],
                    // barWidth: 20,
                    barGap: 0.3,
                    itemStyle: {
                        normal: {

                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(254, 153, 122, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(254, 153, 122, 0.20)'
                                }]
                            },
                        }
                    }
                }]
            };
            this.chartInstance.setOption(option);
        },
        getData() {




            var that = this

            setTimeout(() => {
                that.updateChart();
                // that.updateChart();

            }, 300)
        },
        updateChart() {

            var data = this.allData


            this.xDatas = data.map(item => {
                return item.dates
            })
            var produceCount = data.map(item => {//生产
                return item.produceCount
            })
            var overstandardCount = data.map(item => {//超标
                return item.overstandardCount
            })


            var dataOption = {

                xAxis: {

                    // data: ['C10', 'C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'C60', 'other'],//数据
                    data: this.xDatas
                },
                series: [

                    {
                        data: produceCount,//生产
                    },
                    {

                        data: overstandardCount,// 超标
                    }
                ]
            };

            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100);


            //   和分辨率大小相关的配置项
            const adapterOption = {
                // title: {
                //     textStyle: {
                //         fontSize: titleFontSize,
                //     },
                // },

                legend: {
                    textStyle: {
                        fontSize: titleFontSize * 1.2
                    },
                    itemWidth: titleFontSize * 1.2876,
                    itemHeight: titleFontSize * 1.2876,
                    itemGap: titleFontSize * 3
                },
                xAxis: [{
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize * 1.2
                        }
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize * 1.2
                        }
                    },

                }],
                series: [{
                    barWidth: titleFontSize * 1.717, //柱子宽
                }, {
                    barWidth: titleFontSize * 1.717, //柱子宽度
                }]

            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();

        },
    },
};
</script>

<style lang="less" scope></style>
